[1] 라디오/체크박스 버튼 작은 크기로 만들기(여백 없에기)
[Preview]
가끔 여백이 너무 많이 생겨서 라이오 버튼의 크기를 줄이고 싶은 경우가 있습니다.
이때 스타일쉬트의 기능과 가로폭(width) 속성을 사용하면 원하는 크기로 줄일수 있습니다.
<input name=test type=radio style="width='7pt'">
여기서 7pt는 모두 아시겠지만 7point 크기 입니다.
작은 크기로는 버튼의 크기도 줄어들지만 크게하는 경우는 바깥쪽의 여백만 커집니다.
|
[2] 셀렉트 박스 3개를 선택해야만 하는 페이지
[Preview]
3개를 선택하고 "open"을 클릭하면 선택된 항목을 보여줍니다.
그리고 다른 페이지에 해당되는 항목에 대한 페이지를 불러오는 예제입니다. |
[3] 3단계의 셀렉트를 제어하는 예제
[Preview]
3개의 셀렉트가 있고 각 단계별로 선택된 값에 의해 다음 셀렉트가 동적으로 변경되는 예제입니다.
|
[4] select 문에 있는것을 multiple select에 추가하는 예제
[Preview]
하나의 선택박스에서 선택하면 다른 선택박스에 추가는 예제 |
[5] 선택박스 select onchange 예제- text 값을 보여주는
[Preview]
선택박스의 보여주는 값 (text)을 선택시 보여주는 예제입니다. |
[6] 선택박스 select onchange 예제- value 값을 보여주는
[Preview]
옵션안에 value로 지정된 값을 선택 내용이 변경될때마다 보여주는 예제입니다.
value 안에 웹 주소를 넣어 준다면 원하는 페이지로 바로 이동할 수 있습니다.
|
[7] 셀렉트로 다른 셀렉트 비활성화 시키기
[Preview]
선택 박스에서 하나의 자료를 선택하면 또 다른 선택 박스는 선택이 불가능하게
비 활성화 시키고 싶은 경우가 있습니다.
이때 이용할 수 있는 예제입니다.
소스를 다중셀렉트를 이용한것이라 불필요한 코드가 약간 있습니다만
정리해서 사용하시면 될겁니다.
|
[8] 체크박스를 클릭하면 입력값을 더해서 합을 보여주는 예제
[Preview]
체크박스(Checkbox)를 클릭하면 체크될때 값을 합산해서 합계난에 보여줍니다.
이미 체크되어 있는 경우에 클릭하면 값을 지우게 됩니다.
조금 더 응용한다면 각 항목에 커서가 위치하는 경우(새로운 값을 입력할때 마다)
합계부분을 지울수도 있고,
새로운값이 들어올때마다 계산을 다시해서 보여주는 방법도(onchange를 이용하면) 있습니다.
이때는 굳이 체크박스를 클릭할 필요도 없겠네요.
|
[9] 다중 셀렉트 (select)를 제어하는 소스입니다.
[Preview]
처음 콤보리스트에서 항목을 선택하면 동적으로 두번째 콤보리스트의 항목이 바뀝니다.
예로 첫번째 select박스에서 스피커를 선택하면 그담 두번째 select박스에 스피커 종류가 쭉 나아고 모니터를 선택하면 모니터 종류가 나오고 이렇게 하고 싶은경우 응용할 수 있는 예제입니다.
|
[10] 체크박스에 지정된 번호에 해당하는 입력(input) 박스가 생성되는 예제입니다.
[Preview]
숫자의 범위가 1-5까지인데 응용하시면 얼마든지 추가할 수 있습니다.
시마
|
[11] 체크박스 전부 선택하거나 전부 선택해제하기
[Preview]
버튼을 이용하는 법과 링크를 이용하는 방법 두가지를 이용해서
체크박스를 전부 선택하거나 또는 전부 해제하는 방법을 보여주는 예제 소스입니다.
|
[12] 롤오버 체크박스
[Preview]
체크박스가 롤오버 됩니다
|
[13] 체크박스를 클릭하면 입력박스에 커서가 위치하는 자스 예제
[Preview]
입력이 필요한 input 박스앞에 있는 체크박스를 클릭하면 input 박스에 focus가 주어지는 예제입니다.
이미 체크된 경우에는 다시 체크하면 focus를 없애는 기능입니다.
focus(), 와 blur() 함수 이해에 도움이 되는 예제입니다.
<html>
<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript">
function set_txt1(){
if (document.testform.button1.checked) {
document.testform.txt1.focus();
[14] 체크한 버튼에 따라 폼 액션값 바꾸기
[Preview]
라디오버튼을 이용해서 1을 누르면 form1.html로 가고 2를 누르면 form2.html로 가게하고 싶은 경우,
즉, 라디오버튼 onclick할때 action에 다른 페이지를 넣고 싶은 경우 이용합니다.
|
[15] 연동하는 체크박스 체크하기
[Preview]
<html>
<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript">
function set_sub(){
if (document.testform.button1.checked) {
document.testform.button11.checked = true;
document.testform.button12.checked = true;
}else{
document.testform.button11.checked = false ;
docum ..... |
[16] 체크박스를 클릭하면 입력박스에 커서가 위치하는 자스 예제
[Preview]
입력이 필요한 input 박스앞에 있는 체크박스를 클릭하면 input 박스에 focus가 주어지는 예제입니다.
이미 체크된 경우에는 다시 체크하면 focus를 없애는 기능입니다.
focus(), 와 blur() 함수 이해에 도움이 되는 예제입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript">
function set_txt1(){
if ..... |
[17] 라디오 버튼의 체크유무를 체크하는 자스입니다.(버튼갯수가 변할때 이용하면 유용)
[Preview]
시험 문제를 낸다든지 할때 문제의 갰수가 변하는 경우가 있습니다
이때 사용할 수 있는 자스입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript">
//alert('문제를 푸세요');
function validate() {
for (i = 1; i < 3 ; i++) {
if (eval("document.test.exam" + i)[0].checked == true ) ..... |
[18] 라디오 버튼 체크유무 알아내기
[Preview]
자료 입력시 라디오버튼으로 자료를 받는 경우가 있습니다.
유저가 라디오 버튼을 체크했는지를 알아내야 하는 경우.
아래의 함수를 쓰면 됩니다.
가령 남,여을 구분하는 라디오 버튼이라면 변수의 이름이 "sex"라면
자바스크립트안에서
if((document.form1.sex[0].checked == false && document.form1.sex[1].checked == false)) {
alert("남자도 여자도 아님, 호모인가?");
}
|
[19] listbox에서 링크를 이용하여 페이지 바꾸기
[Preview]
폼과 리스트박스와 자바스크립트를 사용해야 합니다.
예제코드입니다.
<form name="selecter">
<select name="LetGo" onchange="window.open(this.options
[this.selectedIndex].value,'_self')">
<option value="/asp/list.asp?code=1>리스트1</option>
<option value="/asp/list.asp?code=2>리스트2</option>
<option value="/asp/list.asp?code=3>리스트3</option>
</select>
</form>
..... |
[20] 체크박스 체크여부 검사하기
[Preview]
페이지에 체크박스가 있는 경우
항상 한개 이상 체크가 되어야 하는 경우, 만약 아무것도
체크된게 없다면 체크하라는 메세지를 출력합니다.
<SCRIPT LANGUAGE="JavaScript">
<!--
function fcheck(rcount) {
var count=0;
if(rcount > 1) {
for( i=0;i<form2.chkboxname.length ;i++) {
if( form2.chkboxname[i].checked == true) count++; }
if(count==0) {
alert("위의 체크박스에 체크후 눌러주세요");
return false;
}
}
..... |
| |